<script setup>
import { computed } from 'vue';

const props = defineProps({
  list: Array,
  default: () => []
})
console.log('props', props.list);

/* 
  1. 父组件传递整个 list
  2. 子组件 defineProps接收
  3. 通过计算属性
      a. 保留 未完成 的数组
      b. 返回数组的长度
  4. 渲染到页面上即可
*/
const leftCount = computed(() => {
  return props.list.filter(v => !v.done).length
})
</script>

<template>
  <footer class="footer">
    <span class="todo-count"><strong>{{ leftCount }}</strong> item left</span>
    <ul class="filters">
      <li>
        <a class="selected" href="#/">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed">Clear completed</button>
  </footer>
</template>

<style lang="less" scoped>
</style>
